<template>
  <div class="comment">
    <div class="com-header">留言</div>
    <div class="com-main" v-loading="loading">
        <div v-if="commentDatas.length==0" class="com-content">暂时没有评论</div>
        <div v-else v-for="item in commentDatas" :key="item.id" class="com-item">
            <div class="com-user">{{item.name}} 说：</div>
            <div class="com-content" v-html="item.content"></div>
            <div class="com-footer">
                <div class="time">{{$filters.dateFormat3(item.created)}}</div>   
                <!-- 2020年12月28日 09:12 -->
                <span>|</span>
                <div class="quote" @click="quote(item.name,item.content)">引用</div>
            </div>
        </div>
    </div>
    <div class="com-form">
        <h2 class="title">我要发表看法</h2>
        <el-form ref="form" label-position="top" :model="form" label-width="auto" :rules="rules">
            
            <el-form-item label="您的留言：" prop="content">
                <el-input type="textarea" :rows="10" v-model="form.content"></el-input>
            </el-form-item>

            <el-form-item 
                label="您的大名："
                prop="name"
                >
                <el-row>
                    <el-col :sm="12">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                    <el-col :sm="12">
                        <span><i class="el-icon-back"></i>必填</span>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item 
                label="电子邮件："
                prop="email"
                >
                <el-row>
                    <el-col :sm="12">
                        <el-input v-model="form.email"></el-input>
                    </el-col>
                    <el-col :sm="12">
                        <span><i class="el-icon-back"></i>必填，不公开</span>
                    </el-col>
                </el-row>
            </el-form-item>
            <!-- <el-form-item label="个人网址：">
                <el-row>
                    <el-col :sm="12">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                    <el-col :sm="12">
                        <span><i class="el-icon-back"></i>选填，相信你不会填写广告链接</span>
                    </el-col>
                </el-row>
            </el-form-item> -->
            <el-form-item style="margin-bottom: 0">
                <el-checkbox v-model="form.checked" @change="cancle">记住个人信息</el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSubmit" :loading="btnLoading">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>
  </div>

</template>

<script>
  import {getCommentInfo, touristSave, commentAdd} from 'network/app'
  export default {
    data() {
        const validateContent = (rule, value, callback) => {
            if (value === '') {
                callback(new Error("请输入留言内容"))
            } else {
                if (value.length > 512 || value.length < 1) {
                    callback(new Error('长度在1到512个字符之间'))
                }
                callback()
            }
        }
        const validateName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error("请输入您的大名"))
            } else {
                if (value.length > 16 || value.length < 1) {
                    callback(new Error('长度在1到16个字符之间'))
                }
                callback()
            }
        }
        const validEmail = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入邮箱'))
            } else {
                const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                if (!reg.test(value)) {
                callback(new Error('请输入正确的邮箱格式'))
                } else {
                callback()
                }
            }
        }
        return {
            form: {
                content: '',
                name: '',
                email: '',
                checked:　false,
                blogId: null,
                touristId: null
            },
            page: {
                currentPage: 1,
                pageSize: 20
            },
            commentDatas: [],
            rules: {
                content: [{validator: validateContent, trigger: 'blur'}],
                name: [{validator: validateName, trigger: 'blur'}],
                email: [{ validator: validEmail, trigger: 'blur' }],
            },
            loading: false,
            btnLoading: false
        }
    },
    methods: {
        onSubmit() {
            this.form.blogId = this.$route.params.blogId
            this.$refs.form.validate(valid => {
                if(valid){
                    if(this.form.checked){
                        let obj = {}
                        obj.name = this.form.name
                        obj.email = this.form.email
                        obj.checked = this.form.checked
                        this.$store.commit("SET_TOURISTINFO", obj)
                    }
                    this.btnLoading = true
                    touristSave({name: this.form.name, email: this.form.email})
                        .then(res=>{
                            console.log(res)
                            this.form.touristId = res.data.data.id
                            
                            commentAdd(this.form)
                                .then(res=>{
                                    this.$message({
                                        message: '发表成功，等待审核',
                                        type: 'success'
                                    })
                                })
                        })
                        .finally(()=>{
                            this.btnLoading = false
                        })
                }
            })
        },
        cancle(value){
            if(!value){
                this.$store.commit("REMOVE_TOURISTINFO")
            }
        },
        getCommentInfo(){
            this.loading = true
            let id = this.$route.params.blogId
            this.page.blogId = id
            getCommentInfo(this.page)
                .then(res=>{
                    this.commentDatas = res.data.data.records

                })
                .finally(()=>{
                    this.loading = false
                })
        },
        quote(name, content){
            let newContent = content.replace(/<blockquote>[\d\D]+<\/blockquote>/g, '')
            console.log(newContent)
            let quoteInfo = `<blockquote>\n<pre>引用${name}的发言：</pre>\n<p>${newContent}</p>\n</blockquote>\n`
            this.form.content = quoteInfo + this.form.content
        },
        touristInfo(){
            let info = this.$store.getters.getTourist
            if(info && info.checked){
                this.form.checked = info.checked
                this.form.name = info.name
                this.form.email = info.email
            }
        }
    },
    
    created(){
        this.getCommentInfo()
        this.touristInfo()
    }
  }
</script>

<style lang="scss" scoped>
    .comment{
        margin-top: 1rem;
        .com-header{
            font-size: .45rem;
            line-height: .45rem;
            padding-bottom: .37037rem;
            font-weight: bold;
            border-bottom: 1px solid #d3d3d3;
            
        }
        .com-main{
            margin-top: .185185rem;
            padding: .092593rem .185185rem;
            border-bottom: 1px dashed #d3d3d3;
            .com-user{
                font-size: .296296rem;
                line-height: .296296rem;
                font-weight: bold;
            }
            .com-content{
                font-size: .259259rem;
                padding: .37037rem;
                line-height: .518519rem;
                blockquote{
                    background-color: #ccc;
                    padding: .185185rem;
                }
            }
            .com-footer{
                display: flex;
                justify-content: flex-end;
                span{
                    padding: 0 .092593rem;
                }
                .quote{
                    text-decoration: underline;
                    cursor: pointer;
                }
            }

        }

        .com-form{
            margin: .555556rem;
            background-color: #eee;
            padding: .555556rem;
            border-radius: .185185rem;
            .title{
                font-size: .518519rem;
                line-height: .37037rem;
                border-bottom: 1px solid #d3d3d3;
                padding: .185185rem 0;
                margin-bottom: .185185rem;
            }
            span{
                font-size: .296296rem;
                color: #909399;
                padding-left: .37037rem;
            }
        }
    }
    @media (max-width: 614px) {
        .comment{
            .com-form{
                span{
                    padding-left: 0;
                }
            }
        }
    }
</style>
<style lang="scss">
    .el-form-item__label{
        font-size: .296296rem;
        padding-bottom: 0 !important;
    }
    .com-content{
        blockquote{
            background-color: #e7e4e4;
            padding: .185185rem;
            border-radius: 5px;
            margin: .185185rem 0;
            line-height: .518519rem;
            pre{
                font-weight: bold;
                margin-bottom: .092593rem;
            }
            p{
                text-indent: 1em;
            }
        }
    }
</style>